<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
{% load static %}
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>登录界面</title>
    <link href="{% static 'css/login_code/default.css' %}" rel="stylesheet" type="text/css">
    <!--必要样式-->
    {#    <link rel="stylesheet" href="{% static 'plugin/font-awesome-4.7.0/css/font-awesome.min.css' %}">#}
    <link href="{% static 'css/login_code/styles.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'css/login_code/demo.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'css/login_code/loaders.css' %}" rel="stylesheet" type="text/css">
    <link id="layuicss-skinlayercss" rel="stylesheet" href="{% static 'css/login_code/layer.css' %}" media="all">
    <style>
        #myCanvas {
            display: none;
        }

        .error_msg {
            color: red;
            position: relative;

        }

        .login-btn2 {
            width: 80%;
            position: relative;
            margin-top: 30px;
            margin-left: 250px;
        }

        .login-btn2 a input {
            box-shadow: #0f0f0f;

        }

        .login-btn2 a input:hover {
            cursor: pointer;
            color: rgb(50, 115, 190);
        }
    </style>
</head>
<body style="">
<canvas class="pg-canvas" width="1366" height="553"></canvas>

<div class="login">

    <div class="login_title">
        <span style="margin: 0 70px;font-size: 20px">用户登录</span>
    </div>

    <form action="{% url 'login_code' %}" method="post">
        {% csrf_token %}
        <div class="login_fields">
            <div class="login_fields__user">
                <div class="icon" style="opacity: 0.5;">
                    <img alt="" src="{% static 'imgs/login_code/user_icon_copy.png' %}">
                </div>
                <input name="username" placeholder="请输入手机号或者邮箱" maxlength="16" type="text" value=""
                       id="id_username">
                <span class="error_msg">{{ form.username.errors.0 }}</span>

            </div>

            <div class="login_fields__password">
                <div class="icon" style="opacity: 0.5;">
                    <img alt="" src="{% static 'imgs/login_code/lock_icon_copy.png' %}">
                </div>
                <input name="password" placeholder="请输入密码" maxlength="16" type="password"
                       id="id_password">
                <span class="error_msg">{{ form.password.errors.0 }}</span>

                <div class="validation" style="opacity: 1; right: -5px;top: -3px;">
                    <canvas class="J_codeimg" id="myCanvas" onclick="Code();">对不起，您的浏览器不支持canvas，请下载最新版浏览器!</canvas>
                </div>
            </div>

            <div class="login_fields__password">
                <div class="icon" style="opacity: 0.5;">
                    <img alt="" src="{% static 'imgs/login_code/key.png' %}">
                </div>
                <input name="code" placeholder="请输入验证码" maxlength="6" type="text"
                       id="id_code">
                <span class="error_msg">{{ form.code.errors.0 }}</span>

                <div class="validation" style="opacity: 1; right: -1px;top: 6px;">
                    <img src="{% url 'image_code' %}" alt="" id="clickImg">
                </div>

            </div>

            <div class="login_fields__submit">
                <input type="submit" value="登录" id="loginCode">
            </div>
            <div class="login-btn2">
                <a href="{% url 'login_sms' %}">
                    <input type="button" value="短信登录?" id="btnLogin">
                </a>
            </div>

        </div>
    </form>
</div>


<link href="{% static 'css/login_code/layui.css' %}" rel="stylesheet" type="text/css">
<script src="{% static 'js/login_code/jquery-1.10.2.js.下载' %}"></script>
<script src="{% static 'js/login_code/jquery.min.js.下载' %}"></script>
<script type="text/javascript" src="{% static 'js/login_code/jquery-ui.min.js.下载' %}"></script>
<script type="text/javascript" src="{% static 'js/login_code/stopExecutionOnTimeout.js.下载' %}"></script>
<script src="{% static 'js/login_code/layui.js.下载' %}" type="text/javascript"></script>
<script src="{% static 'js/login_code/Particleground.js.下载' %}" type="text/javascript"></script>
<script src="{% static 'js/login_code/Treatment.js.下载' %}" type="text/javascript"></script>
<script src="{% static 'js/login_code/jquery.mockjax.js.下载' %}" type="text/javascript"></script>
<script type="text/javascript">
    var canGetCookie = 0;//是否支持存储Cookie 0 不支持 1 支持
    var ajaxmockjax = 1;//是否启用虚拟Ajax的请求响 0 不启用  1 启用
    //默认账号密码
    var truelogin = "kbcxy";
    var truepwd = "mcwjs";
    var CodeVal = 0;
    Code();

    function Code() {
        if (canGetCookie == 1) {
            createCode("AdminCode");
            var AdminCode = getCookieValue("AdminCode");
            showCheck(AdminCode);
        } else {
            showCheck(createCode(""));
        }
    }

    function showCheck(a) {
        CodeVal = a;
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        ctx.clearRect(0, 0, 1000, 1000);
        ctx.font = "80px 'Hiragino Sans GB'";
        ctx.fillStyle = "#E8DFE8";
        ctx.fillText(a, 0, 100);
    }

    //粒子背景特效
    $('body').particleground({
        dotColor: '#E8DFE8',
        lineColor: '#133b88'
    });

    var open = 0;
    layui.use('layer', function () {
        var msgalert = '默认账号:' + truelogin + '<br/> 默认密码:' + truepwd;
        var index = layer.alert(msgalert, {
            icon: 6,
            time: 4000,
            offset: 't',
            closeBtn: 0,
            title: '友情提示',
            btn: [],
            anim: 2,
            shade: 0
        });
        layer.style(index, {
            color: '#777'
        });
        //非空验证
        $('input[type="button"]').click(function () {
            var login = $('input[name="login"]').val();
            var pwd = $('input[name="pwd"]').val();
            var code = $('input[name="code"]').val();
            if (login == '') {
                ErroAlert('请输入您的账号');
            } else if (pwd == '') {
                ErroAlert('请输入密码');
            } else if (code == '' || code.length != 4) {
                ErroAlert('输入验证码');
            } else {
                //认证中..
                fullscreen();
                $('.login').addClass('test'); //倾斜特效
                setTimeout(function () {
                    $('.login').addClass('testtwo'); //平移特效
                }, 300);

                setTimeout(function () {
                    $('.authent').show().animate({right: -320}, {
                        easing: 'easeOutQuint',
                        duration: 600,
                        queue: false
                    });
                    $('.authent').animate({opacity: 1}, {
                        duration: 200,
                        queue: false
                    }).addClass('visible');
                }, 500);

                AjaxPost(url, JsonData,
                    function () {
                        //ajax加载中
                    },
                    function (data) {
                        //ajax返回
                        //认证完成
                        setTimeout(function () {
                            $('.authent').show().animate({right: 90}, {
                                easing: 'easeOutQuint',
                                duration: 600,
                                queue: false
                            });
                            $('.authent').animate({opacity: 0}, {
                                duration: 200,
                                queue: false
                            }).addClass('visible');
                            $('.login').removeClass('testtwo'); //平移特效
                        }, 2000);
                        setTimeout(function () {
                            $('.authent').hide();
                            $('.login').removeClass('test');
                            if (data.Status == 'ok') {
                                //登录成功
                                $('.login div').fadeOut(100);
                                $('.success').fadeIn(1000);
                                $('.success').html(data.Text);
                                //跳转操作

                            } else {
                                AjaxErro(data);
                            }
                        }, 2400);
                    })
            }
        })
    })


</script>

<script>
    $(function () {
        clickCode();
    })

    function clickCode() {

        $("#clickImg").click(function () {
            // 获取当前的attr
            var Old = $(this).attr('src')
            // 进行修改
            $(this).attr('src', Old + '?')
        })

    }
</script>
</body>
</html>